<template>
	<div class="cityson">
		<article>
			<h3>定位/附件城市</h3>
			<ul>
				<li>{{show}}</li>
			</ul>
		</article>
		<article>
			<h3>热门城市</h3>
			<ul>
				<li v-for="item in hotCities" :key="item.code" @click="toHome(item.name)" :class="{ 'default' : show==item.name }">{{item.name}}</li>
			</ul>
		</article>
		<article v-for="(it,index) in citylist" :key="index">
			<h3>字母{{it.initial}}开头的城市</h3>
			<ul>
				
				<li v-for="keys in it.list" :key="keys.code" @click="toHome(keys.name)" :class="{ 'default' : show==keys.name }">{{keys.name}}</li>
			</ul>
		</article>
	</div>
</template>

<script>
/*
	效果1:当选中某个城市,立即返回首页
	效果2:当选中某个城市,被选中的城市有默认样式;定位城市的内容替换成被选中的城市
	效果3:当选中某个城市,不仅替换Home/Banner的城市;要需要将其保留在本地
*/
	import {mapState} from 'vuex';
	export default{
		name : 'Cityson',
		data(){
			return {
				hotCities : [],
				citylist : [],
				show : localStorage.city
			}
		},
		methods:{
			toHome(cname){
				this.show = cname;
				this.$store.commit('add',this.show);
				// 返回首页
				this.$router.push('/');
			}
		},
		computed:{
			...mapState(['cityName'])
		},
		created(){
			let that = this;
			this.axios.get('/api/city.json').then( (res)=>{
				if(res.status == 200){
					that.hotCities = res.data.data.hotCities;
					that.citylist = res.data.data.city;
					// console.log(that.citylist);
					
				}else{
					console.log('状态未选中');
				}
			} ).catch( (error)=>{
				console.log(error);
			} );
			if( localStorage.city ){
				this.show = localStorage.city;
			}
		}
	}
</script>

<style scoped>
	.cityson article ul .default{
		background-color: #E6C81A;
		color: white;
	}
	.cityson{
		width: 95%;
		margin: 0 auto;
	}
	.cityson article{
		width: 100%;
		overflow: hidden;
		border-bottom: 2px solid #9b9b9b;
	}
	.cityson article h3{
		width: 100%;
		margin-left: 2%;
		font-size: 0.38rem;
		line-height: 0.8rem;
		color: gainsboro;
		float: left;
	}
	.cityson article ul li{
		width: 15%;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 0.32rem;
		color: #9B9B9B;
		text-align: center;
		border-radius: 0.3rem;
		margin-right: 1.6%;
		margin-top: 0.4rem;
		margin-bottom: 0.2rem;
		background-color: #e6e6e6;
		float: left;
	}
	.cityson article ul li:last-child{
		margin-bottom: 0.6rem;
	}
</style>
